<template>
    <div class="withdrawal">
      <h3>提现记录</h3>
      <br>
      <br>
      <hr>
      <div class="demo-date-picker">
          <div class="block">
        <el-date-picker
          v-model="value2"
          type="daterange"
          start-placeholder="2022-11-1"
          end-placeholder="2022-11-8"
          :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
        />
        <el-button class="screen" type="info">筛选</el-button>
  
      </div>
      </div>
      <br><br>
      <hr>
      <el-table :data="tableData" style="width: 100%;" >
      <el-table-column property="time" label="时间" width="180" align="center" />
      <el-table-column property="money" label="金额" width="260" align="center"/>
      <el-table-column property="state" label="状态" width="260" align="center"/>
      <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
              <button class="button">审核通过</button>
              <button class="button">审核不过</button>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination  class="paging" background layout="prev, pager, next" :total="total" :default-page-size="pageSize"
                hide-on-single-page @current-change="pageChange"  />
    </div>
  </template>
  
  <script>
  import { getWithdrawal } from '@/api/user'
  export default {
    name: 'withdrawal',
      data(){
          return{
              value2:[new Date(2010, 9, 1), new Date(2010, 10, 1)],
              tableData:[
          {
            time:'2017',
            money:'500元',
            state:'已打款',
          },
          {
            time:'2017',
            money:'500元',
            state:'已打款',
          },
          {
            time:'2017',
            money:'500元',
            state:'已打款',
          },
        ],
          }
      },
      methods:{
      // 分页切换
      pageChange(page) {
            this.withdrawal(page)
        },
        // 请求配送记录数据
        async withdrawal(page=1) {
            const res = await getWithdrawal(page)
            console.log(res)
            //@ts-ignore
            const {list,total,pageSize} = res
            this.tableData = list
            this.total = total
            this.pageSize = pageSize
        }
    },
    created() {
        this.withdrawal()
    },
  }
  </script>
  
  <style lang="less" scoped>
  .withdrawal h3 {
    font-size: 18px;
    font-weight: 600;
    float: left;
    padding-left: 20px;
  }
    .demo-date-picker {
    float: left;
    margin-left: 20px;
  }
  
  .demo-date-picker .block {
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
  }
  .demo-date-picker .block:last-child {
    border-right: none;
  }
  .demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
  .screen{
      margin-left: 50px;
      margin-bottom: 6px;
      border-radius: 0;
    }
  .button {
      width: 76px;
      height: 32px;
      border: none;
      margin-left: 10px;
      background-color:#d7d7d7;
  }
  .paging {
    margin-top: 50px;
    margin-left: 450px;
    
  }
  </style>